<template>
  <!--折线图-->
  <div
    :style="{width:width,height:height}"
  ></div>
</template>

<script>
  export default {
    name: 'FourLineCharts',
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: ''
      },
      /**
       * @param:
       *    dataLine  --> 折线的数据
       *    dataY  --> Y轴的数据
       * @date 2020/08/23
       * @author ZhuHongWei
       */
      chartData: {
        type: Object,
        default: () => {
        }
      },
      xTitle:{
        type: String,
        default: '天'
      }
    },
    data() {
      return {}
    },
    watch: {
      chartData: {
        deep: true,
        handler: function () {
          this.initChart()
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    methods: {
      initChart() {
        let that = this
        this.chart = this.$echarts.init(this.$el)
        this.chart.clear()
        let option = {
          title: {
            show: false,
            textStyle: {
              color: '#ffffff',
              fontStyle: 'normal',
              fontWeight: 'normal',
              fontSize: '18',
            }
          },
          grid: {
            left: '4%',
            right: '2%',
            bottom: '0%',
            top: '10%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              lineStyle: {color: '#FFFFFF',}
            },
            backgroundColor: '#333',
            formatter:function(val){
              if (val[0].name.length < 12) {
                return `${val[0].name.substring(5,7)}月${val[0].name.substring(8,10)}日, ${val[0].value}`
              } else {
                return `${val[0].name.substring(5,7)}月${val[0].name.substring(8,10)}日${val[0].name.substring(11,13)}时, ${val[0].value}`
              }
            },
          },
          legend: {
            show: false,
            data: ['综合', '网页', '视频' , 'DNS'],
            textStyle: {
              color: '#B4B4B4'
            },
            top: '0%',
          },
          xAxis: [{
            name: this.xTitle,
            nameLocation: 'start',
            nameTextStyle: {
              color: '#FFFFFF',
              padding: [30, 0, 0, 0]
            },
            boundaryGap: false,
            type: 'category',
            axisLabel: {
              show: true,
              interval: 0, // 横轴信息全部显示
              // rotate: 40, // x轴旋转
              textStyle: {
                color: "#FFFFFF",
                fontSize: 14
              },
              formatter:function(e){
                if (that.chartData.dateType === 20 && e.substring(11, 13) === '00') {
                  return e.substring(8,10)
                } else if (that.chartData.dateType === 10) {
                  return e.substring(11,13)
                } else if (that.chartData.dateType === 30 && e.substring(11, 13) === '00') {
                  return e.substring(8,10)
                } else {
                  return ''
                }
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            },
            axisTick: {
              show: true
            },
            splitArea: {
              show: false
            },
            data: this.chartData.dataY
          }],
          dataZoom:[{
            type: 'inside'    // 详细配置可见echarts官网
          }],
          yAxis: [{
            type: 'value',
            min: this.chartData.minY,
            max: this.chartData.maxY,
            splitNumber: 5,
            name: '得分',
            nameLocation: 'end',
            nameTextStyle: {
              color: '#FFFFFF',
              fontSize: 12,
              padding: [0,0,-20,-80]
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ffffff",
                fontSize: 14
              }
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            }
          }],
          series: [
            {
              name: '',
              type: 'line',
              symbolSize: 0,
              symbol: 'circle',
              smooth: false,
              itemStyle: {
                normal: {
                  color: '#96ceb4',
                  label: {
                    show: false,
                    textStyle: {
                      color: 'rgba(255,255,255,0.1)'
                    }
                  },

                }
              },
              lineStyle: {
                normal: {
                  color: 'rgba(24,106,209,1)' // 线条颜色
                }
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#ffffff'
                }
              },
              data: this.chartData.dataLine
            }
          ]
        }
        this.chart.setOption(option)
      }
    }
  }
</script>

<style scoped>
</style>
